<template>
    <section class="register">
        <div class="register_modal">
            <img class="img" src="../../assets/images/login-logo.png">
            <p>富士康工业互联网</p>
            <p>Foxconn Industrial Internet</p>
            <Form>
                <FormItem style="width:250px;margin:25px auto;">
                    <Input :placeholder="$t('langObj.userName')" v-model="userData.username"/>
                </FormItem>
                <FormItem style="width:250px;margin:25px auto;">
                    <Input :placeholder="$t('langObj.Email')" type="email" v-model="userData.userEmail"/>
                </FormItem>
                <FormItem style="width:250px;margin:25px auto;">
                    <Input :placeholder="$t('langObj.password')" type="password" v-model="userData.password"/>
                </FormItem>
                <FormItem style="width:250px;margin:25px auto;">
                    <Input :placeholder="$t('langObj.comfirmPassword')" type="password" v-model="userData.confirem_password"/>
                </FormItem>
                <div style="width:250px;margin:25px auto;">
                    <Checkbox @on-change="check"></Checkbox>
                    已阅读并同意
                    <p class="user_promise">《用户协议》</p>
                </div>
                <FormItem style="width:250px;margin:20px auto;">
                    <button class="button" @click.prevent="submitRegister" :disabled="!checkRegister">{{ $t('langObj.reg') }}</button>
                </FormItem>
            </Form>
        </div>
    </section>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    data(){
        return{
            userData:{
                username:'',
                userEmail:'',
                password:'',
                confirem_password:'',
            },
            checkRegister:false,
        }
    },
    methods: {
        ...mapActions(['Xregister']),
        submitRegister(){
            if(this.userData.password.trim() !== this.userData.confirem_password.trim()){
                this.$Message.error('两次密码输入不一致');
            }else{
                this.Xregister({
                    email:this.userData.userEmail,
                    password:this.userData.password,
                    userName:this.userData.username,
                }).then(res => { 
                    this.$Message.success('注册成功，账号激活链接已发送您的邮箱！');
                    setTimeout(()=>{
                        this.$router.replace({path:'/login'});
                    },1000)
                }).catch(err => {
                    this.$Message.error(err.response.data.message);
                })
            }
        },
        check(e){
            this.checkRegister = e;
        }
    },
}
</script>

<style lang="scss" scoped>
    .register{
        width: 100vw;
        height: 100vh;
        background-image: url(../../assets/images/login-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        .register_modal{
            width:400px;
            height: 500px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            background:linear-gradient(rgba(200, 200, 200, 0.2),rgba(144, 144,144, 0.2));
            border-radius:6px;
            padding:10px;
            color:rgba(255,255,255,1);
            .img{
                display: block;
                margin:10px auto;
                width: 80px;
                height: 40px;
            }
            & > p{
                text-align: center; 
            }
            & > p:first-of-type{
                font-size: 18px;
            }
            .user_promise{
                display:inline-block;
                color:#00B8EE;
                &:hover{
                    cursor: pointer;
                }
            }
            .button{
                width: 250px;
                border: 0;
                outline: none;
                font-size: 14px;
                line-height: 32px;
                border-radius:6px;
                background-color: rgba(0,184,238,1);
                &:hover{
                    cursor: pointer;
                }
            }
        }
    }
</style>

